<!-- 
  日语和韩语在英文下，可以直接使用英文的相应配置内容
  这里lang需要特殊处理，localMinor为空时是英文，不为空时，依据内容进行判断
-->
<template>
  <div class="langBox">
    <div class="lang" @click.stop="goLang('cn')" :class="{ active: localeCn }">
      <img src="@/assets/images/icon_lang_cn.png" class="img" alt="cn" :style="{ width: width + 'px' }" />
    </div>
    <div class="lang" @click.stop="goLang('en')" :class="{ active: localeEn&&!localeMinor }">
      <img src="@/assets/images/icon_lang_en.png" class="img" alt="en" :style="{ width: width + 'px' }" />
    </div>
    <div class="lang" @click.stop="goLang('ja')" :class="{ active: localeMinor==='ja' }">
      <img src="@/assets/images/icon_lang_jp.png" class="img" alt="jp" :style="{ width: width + 'px' }" />
    </div>
    <div class="lang" @click.stop="goLang('ko')" :class="{ active: localeMinor==='ko'}">
      <img src="@/assets/images/icon_lang_kr.png" class="img" alt="kr" :style="{ width: width + 'px' }" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 60,
    },
  },
  data() {
    return {};
  },
  computed: {
    active() {
      if (lang === "en") {
        this.go2En();
      } else if (lang === "ja") {
        this.go2Ja();
      } else if (lang === "ko") {
        this.go2Ko();
      } else {
        this.go2Cn();
      }
    },
    localeMinor() { 
      return this.$store.state.localeMinor;
    }
  },
  mounted() {},
  methods: {
    goLang(lang) {
      if (lang === "en") {
        this.go2En();
      } else if (lang === "ja") {
        this.go2Ja();
      } else if (lang === "ko") {
        this.go2Ko();
      } else {
        this.go2Cn();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.langBox {
  display: flex;
  align-items: center;
  .lang {
    opacity: 0.5;
    &:not(:first-child) {
      margin-left: 20px;
    }
    &.active {
      opacity: 1;
    }
    &:not(.active) {
      cursor: pointer;
      &:hover {
        transform: scale(1.04);
        transition: all 0.2s linear;
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    .lang {
      width: scale(50px);
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    .lang {
      width: scale(50px);
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    .lang {
      width: scale(50px);
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    .lang {
      width: scale(50px);
    }
  }
}
</style>
